import 'package:eh_mobile/common/style/bny_color.dart';
import 'package:eh_mobile/common/utils/index.dart';
import 'package:eh_mobile/common/utils/nav_bar_title.dart';
import 'package:eh_mobile/common/utils/toast/bnw_toast.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../../../../common/values/svg_image.dart';
import '../../../frame/login/bind/circle_progress_percent.dart';
import '../../../main/smart_home_info/widgets/custom_switch.dart';
import '../set_up_common_utils.dart';

class SetUpSystemPage extends StatefulWidget {
  const SetUpSystemPage({super.key});

  @override
  State<SetUpSystemPage> createState() => _SetUpSystemPageState();
}

class _SetUpSystemPageState extends State<SetUpSystemPage> {
  @override
  Widget build(BuildContext context) {
    return NavBarTitle(
      name: '系统',
      childWidget: ListView(
        children: [
          systemInfoView(),
          12.sizedBoxHeight,
          experienceInfoView(),
          12.sizedBoxHeight,
          remoteTestInfoView(),
          12.sizedBoxHeight,
          checkUpdateView().onClick((){
            BnwToast.showView(context);
          }),
          12.sizedBoxHeight,
          SetUpCommonUtils.bottomCornerView('重启系统',
              textColor: const Color.fromRGBO(0, 150, 208, 1.0)),
        ],
      ),
    );
  }

  //系统百分比
  Widget systemInfoView() {
    return SetUpCommonUtils.helpManageView(
      padding: EdgeInsets.only(left: 20.w, top: 18.h, bottom: 18.w),
      childWidget: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '系统信息',
            style: 18.ts,
          ),
          Text(
            '已运行0天15小时55分钟',
            style: TextStyle(
                fontSize: 14.sp, color: BnyColor.lightAlpha222WhiteColor),
          ),
          20.sizedBoxHeight,
          Padding(
            padding: EdgeInsets.only(left: 19.w, right: 39.w),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                percentCircleView(title: 'CPU'),
                percentCircleView(
                  title: '内存',
                  progress: 0.85,
                  progressColor: const Color.fromRGBO(253, 168, 61, 1.0),
                ),
                percentCircleView(
                  title: '磁盘',
                  progress: 0.9,
                  progressColor: const Color.fromRGBO(241, 85, 71, 1.0),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget percentCircleView(
      {String title = '', double progress = 0.5, Color? progressColor}) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Container(
          width: 80.w,
          height: 80.w,
          decoration: BoxDecoration(
              color: const Color.fromRGBO(28, 28, 28, 0.4),
              borderRadius: BorderRadius.circular(40.r)),
          alignment: Alignment.center,
          child: SizedBox(
            width: 72.w,
            child: CircleProgressPercentPage(
              foregroundColor: progressColor ?? HexColor('#0096D0'),
              backgroundColor: const Color.fromRGBO(255, 255, 255, 0.1),
              value: progress,
              strokeWidth: 6.0.w,
              child: UnconstrainedBox(
                child: Container(
                  alignment: Alignment.center,
                  width: 54.w,
                  height: 54.w,
                  decoration: BoxDecoration(
                      color: const Color.fromRGBO(255, 255, 255, 0.1),
                      borderRadius: BorderRadius.circular(27.w)),
                  child: RichText(
                    text: TextSpan(
                        text: '${(progress * 100).round()}',
                        style: TextStyle(
                            fontSize: 16.sp,
                            color: BnyColor.light222WhiteColor,
                            fontWeight: FontWeight.w500),
                        children: [
                          TextSpan(
                            text: ' %',
                            style: TextStyle(
                                fontSize: 12.sp,
                                color: BnyColor.light222WhiteColor),
                          )
                        ]),
                  ),
                ),
              ),
            ),
          ),
        ),
        12.sizedBoxHeight,
        Text(
          title,
          style: TextStyle(
              fontSize: 18.sp,
              color: BnyColor.light222WhiteColor,
              fontWeight: FontWeight.w500),
        )
      ],
    );
  }

  //抢先体验
  Widget experienceInfoView() {
    return SetUpCommonUtils.helpManageView(
      padding:
          EdgeInsets.only(left: 20.w, top: 18.h, bottom: 18.w, right: 17.w),
      childWidget: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '抢先体验',
                style: 18.ts,
              ),
              Text(
                '允许升级到最新测试版体验全新功能',
                style: TextStyle(
                    fontSize: 14.sp, color: BnyColor.lightAlpha222WhiteColor),
              ),
            ],
          ),
          CustomSwitch(
            value: true,
            onChanged: (value) {},
          )
        ],
      ),
    );
  }

  //远程调试
  Widget remoteTestInfoView() {
    return SetUpCommonUtils.helpManageView(
      padding:
          EdgeInsets.only(left: 20.w, top: 18.h, bottom: 18.w, right: 17.w),
      childWidget: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '远程调试',
                    style: 18.ts,
                  ),
                  Text(
                    '开启远程调试将允许从外部访问设备\n服务及日志',
                    style: TextStyle(
                        fontSize: 14.sp,
                        color: BnyColor.lightAlpha222WhiteColor),
                  ),
                ],
              ),
              CustomSwitch(
                value: true,
                onChanged: (value) {},
              )
            ],
          ),
          16.sizedBoxHeight,
          SetUpCommonUtils.lineGrayView(margin: EdgeInsets.zero),
          Padding(
            padding: EdgeInsets.only(top: 21.h),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  '28261-77CF36A5C023E7E9039580310...',
                  style: TextStyle(
                      fontSize: 14.sp, color: BnyColor.lightAlpha222WhiteColor),
                ),
                SvgPicture.asset('assets/svgs/device_info/list_ic_copy.svg'),
              ],
            ),
          ),
        ],
      ),
    );
  }

  //检查更新
  Widget checkUpdateView() {
    return SetUpCommonUtils.helpManageView(
      childWidget: Padding(
        padding:
            EdgeInsets.only(left: 20.w, right: 17.w, top: 18.h, bottom: 18.h),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  '检查更新',
                  style: 18.ts,
                ),
                SvgPicture.asset(SVGImage.listIcArrowSvg),
              ],
            ),
            Visibility(
              visible: false,
                child: Column(
              children: [
                12.sizedBoxHeight,
                SetUpCommonUtils.lineGrayView(margin: EdgeInsets.zero),
                17.sizedBoxHeight,
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        Text(
                          '系统版本',
                          style: TextStyle(
                              fontSize: 14.sp,
                              color: BnyColor.lightAlpha222WhiteColor),
                        ),
                        12.sizedBoxWidth,
                        Container(
                          padding: EdgeInsets.symmetric(
                              vertical: 2, horizontal: 7.w),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(5.r),
                            border: Border.all(
                                color: BnyColor.lightAlpha222WhiteColor,
                                width: 1),
                          ),
                          child: Text(
                            'Beta',
                            style: TextStyle(
                                fontSize: 12.sp,
                                color: BnyColor.lightAlpha222WhiteColor),
                          ),
                        ),
                      ],
                    ),
                    Row(
                      children: [
                        Text(
                          '最新',
                          style: TextStyle(
                              fontSize: 14.sp,
                              color: BnyColor.lightAlpha222WhiteColor),
                        ),
                        12.sizedBoxWidth,
                        Container(
                          padding: EdgeInsets.symmetric(
                              vertical: 2, horizontal: 7.w),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(5.r),
                            border: Border.all(
                                color: const Color.fromRGBO(0, 150, 208, 1.0),
                                width: 1),
                          ),
                          child: Text(
                            'Release',
                            style: TextStyle(
                                fontSize: 12.sp,
                                color: const Color.fromRGBO(0, 150, 208, 1.0)),
                          ),
                        ),
                        40.sizedBoxWidth,
                      ],
                    ),
                  ],
                ),
                7.5.sizedBoxHeight,
                Row(
                  children: [
                    Text(
                      '2023.0829.486',
                      style: TextStyle(
                          fontSize: 18.sp, color: BnyColor.light222WhiteColor),
                    ),
                    20.sizedBoxWidth,
                    Text(
                      '→',
                      style: TextStyle(
                        fontWeight: FontWeight.w500,
                        fontSize: 18.sp,
                        color: const Color.fromRGBO(38, 168, 105, 1.0),
                      ),
                    ),
                    22.sizedBoxWidth,
                    Text(
                      '2023.0831.596',
                      style: TextStyle(
                        fontWeight: FontWeight.w500,
                        fontSize: 18.sp,
                        color: const Color.fromRGBO(38, 168, 105, 1.0),
                      ),
                    ),
                  ],
                ),
                20.sizedBoxHeight,
                Container(
                  decoration: BoxDecoration(
                    border: Border.all(
                        color:const Color.fromRGBO(196, 196, 196, 0.2), width: 1),
                    borderRadius: BorderRadius.circular(5.r),
                  ),
                  padding:
                      EdgeInsets.symmetric(horizontal: 126.w, vertical: 13.h),
                  child: Text(
                    '立即更新',
                    style: TextStyle(
                      fontSize: 18.sp,
                      color: const Color.fromRGBO(0, 150, 208, 1.0),
                    ),
                  ),
                ),
              ],
            )),
          ],
        ),
      ),
    );
  }
}
